<template>
    <el-dialog 
        :visible.sync="isVisible"
        title="商品详情"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :modal-append-to-body="false"
        @close="closeDialog">
        <div class="form">
            <el-form 
                ref="form" 
                :model="form"
                :rules="form_rules"
                :label-width="dialog.formLabelWidth" 
                style="margin:10px;width:auto;">

                <el-form-item prop='goods_name' label="商品名称:">
                    {{form.goods_name}}
                    <!-- <el-input type="text" placeholder="请输入商品名称" v-model="form.goods_name"></el-input> -->
                </el-form-item>
				
				<el-form-item prop='username' label="商品封面图:">
				    <upload-img isDetail=true @deleteImage="deleteImage" @addImage="addImage"  :fileList="imageList"></upload-img>
				</el-form-item>
				
				
				<el-form-item prop='username' label="商品描述:">
                    {{form.goods_remark}}
					<!-- <el-input
					  type="textarea"
					  :rows="2"
					  placeholder="建议300字以内,未填写将根据商品名称自动生成"
					  v-model="form.goods_remark">
					</el-input> -->
				</el-form-item>
				
				<el-form-item prop='price' label="商品价格:">
                    {{form.price}}
				    <!-- <el-input  type="text" placeholder="请输入商品价格" v-model="form.price"></el-input> -->
				</el-form-item>
                
                 <el-form-item prop='username' label="商品轮播图:">
                     <upload-img isDetail=true @deleteImage="deleteBanner" @addImage="addBanner" :limit="5" :fileList="bannerList"></upload-img>
                 </el-form-item>
				 
				 <el-form-item prop='username' label="商品详情图:">
				     <upload-img isDetail=true @deleteImage="deleteDetail" @addImage="addDetail" :limit="10" :fileList="detailList"></upload-img>
				 </el-form-item>
				 
              
                <el-form-item  class="text_right">
                    <el-button @click="isVisible = false">取 消</el-button>
                    <el-button type="primary" @click='onSubmit("form")'>提  交</el-button>
                </el-form-item>

            </el-form>
        </div>
    </el-dialog>
</template>

<script>
   import { mapState, mapGetters } from 'vuex'
   import { addGood, editGood, getGoodsDetail } from "@/api/goods";
   import UploadImg from "@/components/uploadImg";
   import AreaJson from "@/assets/datas/area.json"

  export default {
      name:'addFundDialogs',
	  components: {
		  UploadImg
	  },
      data(){
          return {
            areaData:[],
            title: '商品详情',
            isVisible: this.isShow,
            imageList: [],
            bannerList: [],
            detailList: [],
            form:{
                goods_name:'',
                price:'',
                goods_remark: ''
            },
            form_rules: {
                goods_name: [
                    {required: true, message : '商品名称',trigger : 'blur'}
                ],
                price: [
                    { required: true, message : '商品价格',trigger: 'blur'}
                ],
            },
            //详情弹框信息
            dialog: {
                width:'400px',
                formLabelWidth:'120px'
            }
          }
      },
      props:{
          isShow:Boolean,
          limit: Number,
          dialogRow: Object,
      },
      computed:{
        // ...mapGetters(['addFundDialog']),
      },
      created(){
            this.areaData = AreaJson
      },
      mounted(){
          this.getDetail();
      },
      methods:{
          getDetail() {
              if(this.dialogRow.id) {
                  let param = {
                      goodId: this.dialogRow.id
                  }
                  getGoodsDetail(param).then(res => {
                      this.form.goods_name = res.data.goods_name;
                      this.form.price = res.data.price;
                      this.form.goods_remark = res.data.goods_remark;
                      this.form.goodsId = res.data.id;
                    //   this.bannerList = res.data.introduce_images_list.map(item => {
                    //     item.imageUrl = 'http://' + item.imageUrl;
                    //   });;
                    let newDataBanner = [];
                    res.data.introduce_images_list.map(item => {
                        newDataBanner.push({
                            imageId: item.imageId,
                            imageUrl: 'http://' + item.imageUrl
                        })
                    });
                    this.bannerList = newDataBanner;
                    let newData = [];
                    res.data.detail_images_list.map(item => {
                        newData.push({
                            imageId: item.imageId,
                            imageUrl: 'http://' + item.imageUrl
                        })
                    });
                    this.detailList = newData;
                      this.imageList = [{
                          imageUrl: 'http://' + res.data.cover_image_url,
                          imageId: res.data.cover_image
                      }];
                  }) 
              }
          },
          deleteImage(file) {
            let newFileList = this.imageList.filter(item => item !== file);
            this.imageList = newFileList;
          },
          addImage(file) {
               this.imageList.push(file);
          },
          deleteDetail(file) {
            let newFileList = this.detailList.filter(item => item !== file);
            this.detailList = newFileList;
          },
          addDetail(file) {
               this.detailList.push(file);
          },
          deleteBanner(file) {
            let newFileList = this.bannerList.filter(item => item !== file);
            this.bannerList = newFileList;
          },
          addBanner(file) {
               this.bannerList.push(file);
          },
          getCascaderObj(val, opt){
            return val.map(function (value, index, array) {
                for (var item of opt) {
                    if (item.value == value) { 
                        opt = item.children; 
                        return item.label; 
                    }
                }
                return null;
            });
         },
          handleChange(value) {
            console.log([...value]); // ["120000", "120200", "120223"]
            this.form.address = [...value];
            let vals = this.getCascaderObj([...value], this.areaData); // arr
            this.form.tableAddress = vals.join(',').replace(/,/g,'');
          },
          closeDialog(){
              this.$emit('closeDialog');
          },
          //表单提交
          onSubmit(form){
            this.$refs[form].validate((valid) => {
                if (valid) {//表单数据验证完成之后，提交数据;
                    let formData = this[form];
                    const para = Object.assign({}, formData)
                    para.cover_image = '';
                    if (!this.imageList.length) {
                         this.$message.error('至少选择一张商品封面图！');
                        return;
                    }
                    if (!this.bannerList.length) {
                         this.$message.error('至少选择一张商品轮播图！');
                        return;
                    }
                    if (!this.detailList.length) {
                         this.$message.error('至少选择一张商品详情图！');
                        return;
                    }
                    this.imageList.map((item,index) => {
                        para.cover_image = para.cover_image +  (index? `,${item.imageId}`: item.imageId);
                    })
                    para.introduce_images = '';
                    this.bannerList.map((item,index) => {
                        para.introduce_images = para.introduce_images +  (index? `,${item.imageId}`: item.imageId);
                    })
                     para.detail_images = '';
                    this.detailList.map((item,index) => {
                        para.detail_images = para.detail_images +  (index? `,${item.imageId}`: item.imageId);
                    })
                    // edit
                    if(this.dialogRow.id){
                        editGood(para).then(res => {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            this.$refs['form'].resetFields()
                            this.isVisible = false
                            this.$emit('getFundList');
                       })
                    }else{
                        // add
                        addGood(para).then(res => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            })
                            this.$refs['form'].resetFields()
                            this.isVisible = false
                            this.$emit('getFundList');
                       })
                    }
                }
            })
          }
      }
  }
</script>

<style lang="less" scoped>
    .search_container{
        margin-bottom: 20px;
    }
    .btnRight{
        float: right;
        margin-right: 0px !important;
    }
    .searchArea{
        background:rgba(255,255,255,1);
        border-radius:2px;
        padding: 18px 18px 0;
    }
</style>
